<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>    
    <head>        
        <title>My Account</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content="My Account" />
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>
        <script src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>

        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>

        <script>
            $( document ).ready(function() {
                $("#account-listings").hide();
            });
            function switchTab1() {                
                $("#account-details").show();                
                $("#account-listings").hide();
            }
            function switchTab2() {                              
                $("#account-details").hide();                
                $("#account-listings").show();
            }
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>
        
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>

    </head>

    <body>
        <div data-role="page" data-theme="d">

            <%@include file="header_mobile.jsp" %>

            <div data-role="navbar" style="width: 100%;" data-theme="a">
                <ul>
                    <li><a href="#" class="ui-btn-active ui-state-persist" data-theme="a" onclick="switchTab1()">My Account</a></li>
                    <li><a href="#" data-theme="a" onclick="switchTab2()">Listings Manager</a></li>
                </ul>
            </div>

            
            <div id="account-details" data-role="content" style="background-color: #ffffff">
                
                <div >
                    <div style="padding: 8px;">
                        <span style="font-size: 18px; font-weight: bold;">&nbsp;Welcome back, ${model.user.firstName}!</span>  
                    </div>

                    <ul data-role="listview" data-inset="true" data-theme="d">
                        <li>Display name: <span style="font-weight: normal; padding-left: 5px;">${model.user.firstName} ${model.user.lastName}</span></li>
                        <li>Email: <span style="font-weight: normal; padding-left: 5px;">${model.user.emailPrimary}</span></li>
                        <li>Mobile: <span style="font-weight: normal; padding-left: 5px;">${model.user.mobilePrimary}</span></li>
                        <li>Landline: <span style="font-weight: normal; padding-left: 5px;">${model.user.landlinePrimary}</span></li>
                    </ul>
                    <br>

                    <a href="${model.props.appPath}/account.htm?a=4&id=${model.user.id}" data-role="button" data-theme="c" data-ajax="false" >Edit account & password</a>    
                     
                    <br>
                    <a href="${model.props.appPath}/logout.htm" data-role="button" data-theme="a" data-ajax="false">Log out</a> 
                </div>
                
            </div>

                            
            <div id="account-listings" style="text-align: center; padding-bottom: 30px;">
                
                <br>
                <a href="${model.props.appPath}/post" data-role="button" data-theme="c" style="width:95%; margin-left:2%;" data-ajax="false">List a new property</a> 
                <br>
                
                        <ul data-role="listview" data-theme="d">                       
                            <c:forEach items="${model.listings}" var="listing">
                                <li itemprop="offers" itemscope itemtype="http://schema.org/Offer" style="height: 90px;">
                                    
                                    <a href="${model.props.appPath}/listing.htm?a=2&id=${listing.id}" title="${listing.title} for rent in ${listing.city}" data-ajax="false">

                                        <img itemprop="image" src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="min-height: 90px; min-width: 120px;"/>
                                        <p itemprop="itemOffered" itemscope itemtype="http://schema.org/Product" style="display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px"><b itemprop="name">${listing.title}</b></p>

                                        <c:choose>
                                            <c:when test="${listing.leaseLongTerm}">
                                                <p style="text-align: left; margin-left: 30px;">&#8369; ${listing.longMonthRate} / Month</p>
                                            </c:when>
                                            <c:otherwise>
                                                <p style="text-align: left; margin-left: 30px;">&#8369; ${listing.shortDayRate} / Night</p>
                                            </c:otherwise>
                                        </c:choose>
                                     
                                        <p style="text-align: left; margin-left: 30px;">
                                            ${listing.impressions} impressions
                                        </p>
                                        <p style="text-align: left; margin-left: 30px;">
                                            ${listing.views} views
                                        </p>      

                                    </a>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                            
            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>

        </div>
    </body>
</html>
